<template>
  <div>
    <el-dialog :title="title" v-model="open" width="700px" append-to-body :before-close="cancel">
      <el-form ref="partyinfoRef" label-position="right" :model="form" :rules="rules" label-width="140px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="上级" prop="father">
              <el-select v-model="form.father" placeholder="请选择上级" clearable>
                <el-option
                  v-for="(item, index) in partyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="语料名称" prop="collector1Name">
              <el-input v-model="form.collectionMethodOther" placeholder="请输入语料名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="语料类型" prop="type">
              <el-input-number
                v-model="form.type"
                :min="1"
                controls-position="right"
                placeholder="请输入语料类型"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, getCurrentInstance, computed, watch } from 'vue'
import { getPhotoregistration, addPhotoregistration, updatePhotoregistration } from '@/api/photoRegistration/index'

const { proxy } = getCurrentInstance()

const props = defineProps({
  id: {
    type: [String, Number],
    default: undefined,
  },
  value: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:value', 'getList'])
const open = computed({
  get: () => props.value,
  set: (val: boolean) => emit('update:value', val),
})

const partyinfoRef = ref<any>()
const form = ref<any>({})
const rules = {
  father: [{ required: true, message: '上级不能为空', trigger: ['blur', 'change'] }],
  type: [{ required: true, message: '语料类型不能为空', trigger: ['blur', 'change'] }],
  collector1Name: [{ required: true, message: '语料名称不能为空', trigger: ['blur', 'change'] }],
}
const partyList = ref([
  { label: '顶级', value: '1' },
  { label: '语料库A', value: '2' },
  { label: '语料库B', value: '3' },
  { label: '语料库C', value: '4' },
])

watch(
  () => props.id,
  newVal => {
    if (newVal) {
      getInfo()
    }
  },
  { immediate: true }
)

function getInfo() {
  getPhotoregistration(props.id).then(response => {
    form.value = response.data
  })
}

// 表单重置
function reset() {
  for (const key in form.value) {
    form.value[key] = undefined
  }
  proxy.resetForm('partyinfoRef')
  console.log(form.value)
}
// 取消按钮
function cancel() {
  reset()
  nextTick(() => {
    open.value = false
  })
}

// 类型选择
const handleTypeChange = (val: string) => {
  if (val !== '3') {
    form.value.typeOther = undefined
  }
}
// 收集方式选择
const handleCollectionChange = (val: string) => {
  if (val !== '2') {
    form.value.collectionMethodOther = undefined
  }
}

const handlepartyChange1 = (val: string) => {
  form.value.collector1No = val
}
const handlepartyChange2 = (val: string) => {
  form.value.collector2No = val
}
/** 提交按钮 */
function submitForm(isPreview = false) {
  return new Promise(relove => {
    proxy.$refs['partyinfoRef'].validate(valid => {
      if (valid) {
        const params = JSON.parse(JSON.stringify(form.value))
        if (isPreview === true) {
          relove(params)
          return
        }
        if (params.id != null) {
          updatePhotoregistration(params).then(response => {
            proxy.$modal.msgSuccess('修改成功')
            reset()
            nextTick(() => {
              open.value = false
              emit('getList')
            })
          })
        } else {
          addPhotoregistration(params).then(response => {
            proxy.$modal.msgSuccess('新增成功')
            reset()
            nextTick(() => {
              open.value = false
              emit('getList', params)
            })
          })
        }
      }
    })
  })
}
</script>

<style scoped>
:deep(.el-input__inner) {
  text-align: left !important;
}
</style>
